<extend name="Index:base"/>

<block name="content">
		<!--content-->
		<div id="content">
			<!--banner-->
			<div class="banner">
				<img src="{$memberimgurl}" style="height:100px"/>
			</div>
			<!--banner end-->
			<div class="myFigureContent">
				<div class="w1064">
					<!--left-->
					<div class="myFigureLeft" style="padding-bottom:100px;">
<script src="__PUBLIC__/js/js.js"></script>
<style type="text/css">
.albumordernuminput{
	display:none;
}
.find_nav {
    width: 96%;
    height: 45px;
    margin-top: 40px;
    border-bottom: 1px solid #ddd;
}
.find_nav_list {
    left: 0;
}
.find_nav_list ul {
    position: relative;
    white-space: nowrap;
    font-size: 0;
}
.find_nav_list ul li {
    display: inline-block;
    padding: 0 13px;
}
.find_nav_list ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 46px;
    font-size: 18px;
    text-align: center;
    color: #666;
}
.find_nav_cur a {
    color: #48a5f4 !important;
}
.sideline {
    display: block;
    position: absolute;
    border: 0;
    height: 2px;
    left: 0;
    top: 43px;
    pointer-events: none;
}
.search_logo {
    display: block;
    width: 44px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 14px;
    color: #48a5f4;
}
</style>

<div class="find_nav">
    <div class="find_nav_left">
        <div class="find_nav_list">

           <ul>
            	<if condition="$typeid eq null">
				 <li><a style="color:#FFAE22" href="{:U('Home/Index/myfigure')}&types=2#navmao">全部</a></li>
				 <else />
				 <li><a href="{:U('Home/Index/myfigure')}&types=2#navmao">全部</a></li>
				</if>
                <volist name="typelist" id="typeitem">
                <if condition="$typeid eq $typeitem[id]">
                <li><a href="javascript:void(0)" style="color:#FFAE22" id="type{$typeitem[id]}">{$typeitem[typename]}</a></li>
                <else />
 				<li><a href="javascript:void(0)" id="type{$typeitem[id]}">{$typeitem[typename]}</a></li>
                </if>
				<script type="text/javascript">
					$("#type{$typeitem[id]}").click(function(){
						window.location.replace("{:U('Home/Index/myfigure')}&types=2&typeid={$typeitem[id]}#navmao");
					})
				</script>
                </volist>
                <li class="sideline"></li>
            </ul>
        </div>
    </div>
</div>
						<!--相册-->
						<div class="myAlbum">
						
							<volist name="albumlist" id="albumlistitem">
							<!--item-->
							<div class="myAlbumItem">
								<div class="myAlbumItemContent">
 												<if condition="$albumlistitem[albumimgid] eq null">
						    						<img id="frame{$albumlistitem[id]}" src="{$albumlistitem[photoframeimgurl]}" style="position:absolute;z-index:500;width:100%;height:100%"/>
													<img src="__PUBLIC__/pc/images/empty_pic.png" style="position:absolute;z-index:300;width:100%;height:100%"/>
												</if>
												<if condition="$albumlistitem[albumimgid] neq null">
						    						<img id="frame{$albumlistitem[id]}" src="{$albumlistitem[photoframeimgurl]}" style="position:absolute;z-index:500;width:100%;height:100%"/>
													<img src="{$albumlistitem[albumimgid]}" style="position:absolute;z-index:300;width:100%;height:100%"/>
												</if>	 
      <!--批量设置-->
      <div class="albumBatchSet">
        <input type="hidden" value="">
        <span class="notSelected"></span>
      </div>
      <!--批量设置 end-->
								</div>
								<div class="myAlbumItemFooter">
									<span>{$albumlistitem[albumname]}</span>
									<a href="javascript:describe{$albumlistitem[id]}()" class="edit_btn" id="btn{$albumlistitem[id]}">详情</a>
								</div>
							</div>
							<!--item end-->
							<script type="text/javascript">
								$("#btn{$albumlistitem[id]}").click(function(){
									$("#alertname").text("{$albumlistitem[albumname]}");
									$("#alertmessage").text("{$albumlistitem[albummessage]}");
									$("#alert2name").text("{$albumlistitem[albumname]}");
								})
							</script>
   <!--mask--> 
    <div id="mask" class="mask{$albumlistitem[id]}"> 
     <span class="maskCloseBtn" onclick="$('.mask{$albumlistitem[id]}').hide();"></span> 
     <!--相册--> 
     <div class="photoItemMask maskMain"> 
      <div class="photoItemMaskOuter"> 
       <!--header--> 
       <div class="photoItemMaskHeader"> 
        <span>{$albumlistitem[albumname]}</span> 
       </div> 
       <!--header end--> 
       <!--content--> 
       <div class="photoItemMaskContent"> 
        <!--swiper--> 
        <div class="photoItemMaskContentSwiper"> 
         <div class="swiper-container"> 
          <div class="swiper-wrapper" id="imglist"> 
          </div> 
          <a href="javascript:void(0)" class="swiper-button-prev"></a> 
          <a href="javascript:void(0)" class="swiper-button-next"></a> 
         </div> 
        </div> 
        <!--swiper end--> 
        <!--main--> 
        <div class="photoItemMaskContentMain"> 
         <p class="cont"> <textarea class="_textarea">{$albumlistitem[albummessage]}</textarea> </p> 
         <dl> 

          <dt> 

           <a id="downimg{$albumlistitem[id]}" href="" onclick="downloadimg{$albumlistitem[id]}()" download="">下载</a> 
           <script type="text/javascript">
           function downloadimg{$albumlistitem[id]}(){
          		var faceimgsrcfocus  = $(".mask{$albumlistitem[id]} .swiper-slide-active img").attr("src");
           		$("#downimg{$albumlistitem[id]}").attr("href",faceimgsrcfocus);
           }
           </script>
          </dt> 
          <dd> 
           <span>分享至:</span> 
           <a href="#"> <img src="__PUBLIC__/pc/images/alpay.png" /> </a> 
           <a href="#"> <img src="__PUBLIC__/pc/images/alpay.png" /> </a> 
           <a href="#"> <img src="__PUBLIC__/pc/images/alpay.png" /> </a> 
           <a href="#"> <img src="__PUBLIC__/pc/images/alpay.png" /> </a> 
          </dd> 
         </dl> 
        </div> 
        <!--main end--> 
       </div> 
       <!--content end--> 
       <!--footer--> 
       <div class="photoItemMaskFooter"> 
        <a href="javascript:$('.mask{$albumlistitem[id]}').hide()">取消</a> 
        <a href="javascript:reprint()">转载</a> 
       </div> 
       <!--footer end--> 
      </div> 
     </div> 
     <!--相册 end--> 
    </div> 
    <!--mask--> 
<script type="text/javascript">
//描述
function describe{$albumlistitem[id]}(){
	$(".mask{$albumlistitem[id]}").show();
	var albumlistid = {$albumlistitem[id]};
	$.post("{:U('Home/Index/home')}&types=2&do=getalbumdetail",{id:albumlistid},function(data){
		var objdata = $.parseJSON(data);
			for(var i = 0;i<objdata.length;i++){
				$(".mask{$albumlistitem[id]} #imglist").append('<div class="swiper-slide"><img class="lunboimg" src="'+objdata[i].imgurl+'"/></div>')
			}
			console.log(objdata);
	})
}
</script>
							</volist>
						</div>
						<!--相册 end-->
					</div>
					<!--left end-->
					<!--公告-->
					<div class="myNotice">
						<!--header-->
						<div class="myNoticeHeader">
							<span>公告</span>
							<a href="#">MORE</a>
						</div>
						<!--header end-->
						<!--content-->
						<div class="myNoticeContent">
							<ul>
								<volist name="noticelist" id="noticeitem">
								<li>
									<a href="#">
										<dl>
											<dt>{$noticeitem[noticetitle]}</dt>
											<dd>{$noticeitem[noticemessage]}</dd>
										</dl>
									</a>
								</li>

								</volist>
							</ul>
						</div>
						<!--content end-->
					</div>
					<!--公告 end-->
				</div>
			</div>
		</div>
		<!--content end-->
			<!--操作-->
			<div class="myFigureOperation">
				<div class="w1064">
					<ul>
						<li>
							<dl>
								<dt>
									<a href="javascript:void(0)" class="batchDownloadBtn"></a>
								</dt>
								<dd>批量下载(1)</dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt>
									<a href="javascript:void(0)" class="batchloadingBtn"></a>
								</dt>
								<dd>装载下载(1)</dd>
							</dl>
						</li>
						<li class="myFigureOperationCancel">
							<dl>
								<dt>
									<a href="javascript:void(0)" class="cancelBtn"></a>
								</dt>
								<dd>取消</dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>
			<!--操作 end-->
</block>
<block name="others">
<!--mask-->
		<div id="mask">
			<span class="maskCloseBtn" onclick="$('#mask').hide();"></span>
			<!--相册-->
			<div class="photoItemMask maskMain">
				<div class="photoItemMaskOuter">
					<!--header-->
					<div class="photoItemMaskHeader">
						<span id="alertname"></span>
					</div>
					<!--header end-->
					<!--content-->
					<div class="photoItemMaskContent">
						<!--swiper-->
						<div class="photoItemMaskContentSwiper">
							<div class="swiper-container">
						  		<div class="swiper-wrapper" id="imglist">

						  		</div>
						  		<a href="javascript:void(0)" class="swiper-button-prev"></a>
								<a href="javascript:void(0)" class="swiper-button-next"></a>
							</div>
						</div>	
						<!--swiper end-->
						<!--main-->
						<div class="photoItemMaskContentMain">
							<p class="cont">
								<textarea class="_textarea" id="alertmessage"></textarea>
							</p>
							<dl>
								<dt>
           							<a id="downimg{$albumlistitem[id]}" href="" onclick="downloadimg{$albumlistitem[id]}()" download="">下载</a> 
           							<script type="text/javascript">
           				           function downloadimg{$albumlistitem[id]}(){
           			          		var faceimgsrcfocus  = $(".mask{$albumlistitem[id]} .swiper-slide-active img").attr("src");
           			           		$("#downimg{$albumlistitem[id]}").attr("href",faceimgsrcfocus);
           			           		}
           			           </script>
           							</script>
									<if condition="$loginornot eq null">
									<a href="javascript:reprint()">转载</a>
									</if>
								</dt>
								<dd>
									<span>分享至:</span>
							<a href="index.html">
								<img src="__PUBLIC__/pc/images/wx.png" />
							</a>
							<a href="{:U('User/Index/login?type=qq')}">
								<img id="qq" src="__PUBLIC__/pc/images/qq.png" />	
							</a>
							<a href="{:U('User/Index/login?type=alipay')}">
								<img src="__PUBLIC__/pc/images/alpay.png" />
							</a>
							<a href="{:U('User/Index/login?type=sina')}">
								<img src="__PUBLIC__/pc/images/weibo.png" />
							</a>
								</dd>
							</dl>
						</div>
						<!--main end-->
					</div>
					<!--content end-->
					<!--footer-->
					<div class="photoItemMaskFooter">
						<a href="javascript:$('#mask').hide()">取消</a>
						<a href="javascript:reprint()">转载</a>
					</div>
					<!--footer end-->
				</div>	
			</div>
			<!--相册 end-->
		</div>
		<!--mask-->
		<!--转载相册-->
		<div class="layer_reprint">
			<div class="layer_reprint_main">
				<div class="row">
					<p id="alert2name"></p>	
				</div>
				<div class="row">
					<select>
						<option>默认相册1</option>
						<option>默认相册2</option>
						<option>默认相册3</option>
					</select>
				</div>
				<!--转载密码-->
				<div class="row">
					<input type="password" class="_txt" placeholder="请输入转载密码" />
				</div>
				<!--转载密码 end-->
			</div>
			<div class="layer_reprint_footer">
				<a href="javascript:reprintConfirm()">转载该相册</a>
			</div>
		</div>
		<!--转载相册 end-->
</block>
<block name="script">

	<script>
		$(function(){
			//banner
			var swiper = new Swiper('.photoItemMask .swiper-container', {
		        pagination: '.photoItemMask .swiper-pagination',
		    	paginationClickable: true,
				prevButton:'.photoItemMask .swiper-button-prev',
				nextButton:'.photoItemMask .swiper-button-next',
		        autoplay: 2500,
		    	loop:true,
		        observer: true,
		        observeParents: true,
		   });
		   $(".myAlbumItem .myAlbumItemContent").hover(function(){
		   		if($(this).find(".albumBatchSet").is(":hidden")){
		   			$(this).find(".myAlbumItemDetails").show();
		   		}
		   },function(){
		   		$(this).find(".myAlbumItemDetails").hide();
		   });
		   $(".albumBatchSet").click(function(){
		   		if($(this).find("span").hasClass("selected")){
		   			$(this).find("span").removeClass("selected");
		   			$(this).find("input").val("");
		   		}else{
		   			$(this).find("span").addClass("selected");
		   			$(this).find("input").val(1);
		   		}
		   });
		   //批量下载
		   $(".batchDownloadBtn").click(function(){
		   		if($(this).hasClass("batchDownloadselectedBtn")){
		   			layer.msg("下载成功");
			   		$(".myAlbum .albumBatchSet").hide();
			   		$(".batchDownloadBtn").removeClass("batchDownloadselectedBtn");
			   		$(this).parents("li").siblings(".myFigureOperationCancel").hide();
		   		}else{
			   		$(this).addClass("batchDownloadselectedBtn");
			   		$(".myAlbum .albumBatchSet").show();
			   		$(this).parents("li").siblings(".myFigureOperationCancel").show();
			   	}	
		   });
		   $(".batchloadingBtn").click(function(){
		   		if($(this).hasClass("batchloadingselectedBtn")){
		   			layer.msg("转载成功");
			   		$(".myAlbum .albumBatchSet").hide();
			   		$(".batchloadingBtn").removeClass("batchloadingselectedBtn");
			   		$(this).parents("li").siblings(".myFigureOperationCancel").hide();
		   		}else{
			   		$(this).addClass("batchloadingselectedBtn");
			   		$(".myAlbum .albumBatchSet").show();
			   		$(this).parents("li").siblings(".myFigureOperationCancel").show();
			   	}	
		   });
		   $(".myFigureOperation .cancelBtn").click(function(){
		   		$(".myAlbum .albumBatchSet").hide();
		   		$(".batchDownloadBtn").removeClass("batchDownloadselectedBtn");
		   		$(this).parents("li").hide();
		   });
	  	});
	  	//描述
	  	function describe(){
	  		$("#mask").show();
	  	}
	  	//转载
	  	var reprintMask,newAlbumMask;
	  	function reprint(){
	  		reprintMask = layer.open({
			 	type: 1,
			  	title: "转载相册", 
			  	content: $('.layer_reprint') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
			});
	  	};
	  	function reprintConfirm(){
	  		layer.close(reprintMask);
	  		layer.msg("转载成功");
	  	}
	</script>
</block>     
